<template>
  <div class="page_list">
    <div class="list_item" v-for="item in newuserlist" @click="buy(item.productId)">
      <div class="title_nav">
         {{item.productName}}
         <span class="new_year_tag" v-show="item.activitys.activityTitle">{{item.activitys.activityTitle}}</span><span class="activ_tag" v-show="item.activitys.length!==0">{{item.activitys.activityDesc}}</span>
           <span class="trage" v-show="item.tip!==0">
            {{getTip(item.tip)}} 
           </span>
      </div>
      <div class="content">
        <div class="left_content">
          <div class="pross">{{item.yearIncome}}%</div>
          <div class="wihite">预期年化</div>
        </div>
        <div class="center_content"></div>
        <div class="right_content">
          <div class="product_des">{{item.interestLimitDes}}<span class="small">{{item.interestLimitType}}</span><span class="line"></span>{{item.partInvestAmount}}<span class="small">元起购</span></div>
          <div class="remain">
             <div class="remain_text"> 剩余{{item.surplusInvestAmount/10000}}万元</div>
            <div class="prograss"  :style="{ width: item.progress+'%'}"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="like_list">
          精选理财
    </div>

    <div class="list_item" v-for="item in toplist" @click="buy(item.productId)">
      <div class="title_nav" >
          {{item.productName}}
           <span class="new_year_tag" v-if="item.activitys.activityTitle">{{item.activitys.activityTitle}}</span><span class="activ_tag" v-show="item.activitys.length!==0">{{item.activitys.activityDesc}}</span>
      </div>
      <div class="content">
        <div class="left_content">
          <div class="pross">{{item.yearIncome}}%</div>
          <div class="wihite">预期年化</div>
        </div>
        <div class="center_content"></div>
        <div class="right_content">
          <div class="product_des">{{item.interestLimitDes}}<span class="small">{{item.interestLimitType}}</span><span class="line"></span>{{item.partInvestAmount}}<span class="small">元起购</span></div>
          <div class="remain">
             <div class="remain_text" v-show="item.surplusInvestAmount!==0"> 剩余{{item.surplusInvestAmount/10000}}万元</div>
             <div class="remain_text" v-show="item.surplusInvestAmount==0">已完成</div>
            <div class="prograss" :style="{ width: item.progress+'%', transition: 'all 2s'}"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- <topbar selected="理财"></topbar>  -->
</div>
</template>
<script>
import countDown from "../components/countdown.vue"
import topbar from "../components/topbar.vue"
export default {
  name: "",
  data() {
    return {
      toplist:[],//精选
      newuserlist:[],//新手
    };
  },
   components: {
    countDown,
    topbar,
  },
  computed: {
    
    },
  mounted() {
       this.$http.get(this.Interface.getProductList,{params:{sessionid:""}}).then(res=>{
      if(res.data.success){
        for (var item of res.data.data.list) {
              if(!item.activitys){
                item.activitys=[];
              }else{
                 item.activitys=item.activitys[0];
              }
              if(item.type==0){
                this.newuserlist.push(item)
              }else{
                this.toplist.push(item)
              }
              console.log(item)
            }
      }
    })
  },
  methods: {
    getTip(type){
      let str="";
      switch(type){
        case 0:
        str= "";
        break;
        case 1:
         str=  "新手标";
        break;
        case 2:
         str=  "金包独享";
        break;
         case 3:
         str=  "本月畅销";
        break;
          case 4:
         str=  "会员专享";
        break;
      }
      return str
    },
    buy(id){
       this.Uitis.Jump({link:`${this.Interface.getH5}productdetail?productid=${id}`})
     }, 
  },
   
};
</script>
<style lang="less">
body{
  background: #f4f4f4;
} 
.page_list{
  margin-bottom: 120px;
 .list_item{
   padding: 40px;
   background: #Fff;
   display: flex;
   flex-direction: column;
   margin-bottom: 15px;
   a{
     text-decoration: none;
   }
   .title_nav{
     font-weight: 600;
     font-size: 26px;
     color: #333;
     position: relative;
     display: flex;
     align-items: center;
     .trage{
       display: block;
       position: absolute;
       background: #ffbd33;
       color: #fff;
       font-size: 18px;
       border-radius: 5px;
       padding: 2px 5px;
       height: 30px;
       line-height: 30px;
       right: 0px;
       top:-10px;
     }
     .new_year_tag{
       background: #feeff0;
       color: #f2616d;
       padding: 2px 10px 0px 10px;
       border-radius: 5px;
       display: inline-block;
       margin-left: 5px;
       height: 30px;
       box-sizing: border-box;
     }
     .activ_tag{
       color: #f2616d;
       padding: 5px 10px;
       border-radius: 5px;
       display: inline-block;
       margin-left: 5px;
       white-space:nowrap;
       text-overflow:ellipsis;overflow:hidden;
       width: 300px;
     }

   }
   .content{
     margin-top: 35px;
     display: flex;
     flex-direction:row;
     justify-content: space-between;
     align-items: center;
     .left_content{
         width: 50%;
        .pross{
          font-size: 44px;
          color: #f2616d;
        }
        .wihite{
          font-size: 22px;
          color: #999;
          margin-top: 20px;
        }
     }
     .center_content{
       width: 1Px;
       height: 85px;
       background: #cccccc;
     }
     .right_content{
        flex: 1;
       box-sizing: border-box;
       padding-left: 45px;
       .product_des{
        font-size: 18Px;
         color: #666666;
         .small{
           font-size: 18px;
           color: #999;
           margin-left:4px; 
         }
         .line{
           display: inline-block;
           width: 1Px;
           background: #999;
           height: 26px;
           margin-left: 28px;
           margin-right: 8px;
         }
       }
       .remain{
         position: relative;
         margin-top: 20px;
         border:1Px solid #d8b78c;
         background: #fff;
         text-align: center;
         color: #d8b78c;
         width: 198px;
         height: 28px;
         line-height: 30px;
         font-size: 18px;
         border-radius: 25px;
         .remain_text{
           position:absolute;
           background: transparent;
           top: 0;
           left: 0;
           z-index: 2;
           width: 100%;
           text-align: center;
         }
         .prograss{
           background: #faf0e3;
           border-radius: 25px;
           height: 98%;
           position: absolute;
           top: 0;left: 0;
          
         }
       }
     }
   }
 }
 .like_list{
   background: #fff;
   border-bottom: 1Px solid #eee;
   text-align: center;
   font-size: 27px;
   color: #333;
   height: 85px;
   line-height: 85px;
   font-weight: 600;
 }
} 
</style>
